<template>
  <div class="user-page">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px', 'background-color':titleBackground}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px', 'background-color':titleBackground}">
        <span style="font-size: 18px;" :style="{color:titleColor}">个人中心</span>
      </div>
    </div>
    <div class="user-container">
      <div class="user-top">
        <img mode="aspectFill" class="bg" src="/static/assets/img/panel5_bg_nor.png"/>
        <div class="user-top-content flex-col-v-center" v-if="isLogin">
          <div class="avatar-box">
            <img class="avatar" :src="user.avatar_url"/>
          </div>
          <div class="name-box flex-row-v-center">
            <input class="flex-1" v-model="nickname" v-if="editNicknameFlag" @confirm="updateNickname"/>
            <span class="flex-1" v-if="!editNicknameFlag">{{user.nickname}}</span>
            <img src="/static/assets/img/panel5_icon_edit_nor.png" @click="editNickname" v-if="!editNicknameFlag"/>
            <img src="/static/assets/img/icon-cancel.png" v-if="editNicknameFlag" @click="editNicknameFlag = false"/>
          </div>
        </div>
        <div class="user-top-content flex-col-v-center" v-else>
          <button class="avatar-box flex-center" @getuserinfo="getUserInfo" open-type="getUserInfo">
            登录
          </button>
          <div class="name-box flex-row-center">
            <span>点击头像微信登录</span>
          </div>
        </div>
      </div>
      <div class="line-10"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoPage('我的资料')">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon1_nor.png"/>
          <span class="item-name">我的资料</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoPage('电子病历')">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel_icon2_nor.png"/>
          <span class="item-name">我的病历</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="item-line"></div>
      <!--<div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoChatTab()">-->
        <!--<div class="flex-row-v-center">-->
          <!--<img class="item-icon" src="/static/assets/img/panel_icon3_nor.png"/>-->
          <!--<span class="item-name">我的咨询记录</span>-->
        <!--</div>-->
        <!--<img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>-->
      <!--</div>-->
      <div class="item-row flex-row-space-between flex-row-v-center contact-row">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel_icon3_nor.png"/>
          <span class="item-name">我的咨询记录</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
        <button open-type="contact" class="contact-btn"></button>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoPage('VIP中心')">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon4_nor.png"/>
          <span class="item-name">VIP中心</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoPage('我的订单')">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon5_nor.png"/>
          <span class="item-name">我的订单</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoPage('购物车')">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel_icon6_nor.png"/>
          <span class="item-name">购物车</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoPage('我的优惠券')">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon7_nor.png"/>
          <span class="item-name">我的优惠券</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoPage('我的物联网设备')">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon8_nor.png"/>
          <span class="item-name">我的物联网设备</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="line-10"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickGoPage('分享收益')">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon9_nor.png"/>
          <span class="item-name">分享收益</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="line-10"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickFuncing()">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon10_nor.png"/>
          <span class="item-name">帮助</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickFuncing()">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon11_nor.png"/>
          <span class="item-name">版本信息</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center contact-row">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon12_nor.png"/>
          <span class="item-name">联系客服</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
        <button open-type="contact" class="contact-btn"></button>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center" @click="onClickFuncing()">
        <div class="flex-row-v-center">
          <img class="item-icon" src="/static/assets/img/panel5_icon13_nor.png"/>
          <span class="item-name">设置</span>
        </div>
        <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
      </div>
    </div>
  </div>
</template>

<script>
  import global from "global";
  import Core from "core";
  import Common from "common";

  export default {
    components: {},

    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        titleBackground: "rgba(255,255,255,0)",
        titleColor: "rgb(255,255,255)",

        isLogin: false,
        user: {},

        editNicknameFlag: false,
        nickname: ""
      };
    },
    onShow () {
      this.user = Core.Data.getUser() || {};
      this.isLogin = !!this.user.id;
    },
    methods: {
      onClickGoPage (page) {
        Common.go(`/pages/${page}/main`);
      },
      getUserInfo (e) {
        let self = this;
        Common.authLogin(() => {
          self.isLogin = Common.isLogin();
          self.user = Core.Data.getUser() || {};
          if (self.isLogin) {
            self._bindDoctor();
          }
        });
      },
      onClickGoChatTab () {
        wx.switchTab({
          url: `/pages/在线咨询2/main`
        });
      },
      onClickFuncing () {
        return;
        Common.funcing();
      },
      editNickname () {
        this.nickname = this.user.nickname || Core.Data.getWxUser().nickName || "";
        this.editNicknameFlag = true;
      },

      updateNickname () {
        Core.Api.User.updateNickname(this.nickname).then(res => {
          this._getUserInfo((r) => {
            Core.Data.setUser(r.user);
            this.user = r.user;
            this.editNicknameFlag = false;
          });
        });
      },

      _getUserInfo (callback) {
        Core.Api.User.getUserInfo()
          .then(res => {
            callback(res);
          })
          .catch(err => {
            Core.Util.showTip("", err.message);
          });
      },

      _bindDoctor () {
        let json = Core.Data.get("json");
        if (json) {
          Core.Api.User.userTrackByScan(JSON.stringify(json))
            .then(res => {
              Core.Data.remove("json");
            })
            .catch(err => {
            });
        }
      }
    },

    onPageScroll (e) {
      if (e.scrollTop >= 50) {
        this.titleColor = `rgb(0, 0, 0)`;
        if (e.scrollTop >= 100) {
          this.titleBackground = `rgba(255,255,255, 1)`;
          return;
        }
      } else {
        this.titleColor = `rgb(255, 255, 255)`;
      }
      this.titleBackground = `rgba(255,255,255, ${e.scrollTop / 100})`;
    }
  };
</script>

<style lang="scss">
  .user-page {
    width: 100%;
    height: 100%;
    position: relative;

    .user-container {
      width: 100%;

      .user-top {
        width: 100%;
        height: 240px;
        position: relative;

        .bg {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
        }

        .user-top-content {
          width: 100%;
          height: 100%;
          padding-top: 97.5px;

          .avatar-box {
            width: 85px;
            height: 85px;
            background: #FFFFFF;
            border-radius: 45px;
            border: 2px solid #FFFFFF;
            z-index: 300;

            .avatar {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .name-box {
            z-index: 300;
            margin-top: 10px;
            max-width: 160px;
            span, input {
              color: #FFFFFF;
              font-size: 18px;
            }
            .del-img {
              font-size: 12px;
              color: #ED2F35;
              text-decoration: underline;
            }

            img {
              width: 25px;
              height: 25px;
            }
          }
        }
      }

      .item-row {
        width: 100%;
        height: 55px;
        background: #FFFFFF;
        padding-left: 20px;
        padding-right: 20px;

        .item-icon {
          width: 28px;
          height: 28px;
        }

        .item-name {
          margin-left: 15px;
          font-size: 16px;
          color: #444444;
        }

        .item-arrow {
          width: 8px;
          height: 15px;
        }
      }

      .item-line {
        width: calc(100% - 80px);
        margin-left: 60px;
        height: 1px;
        background: #F4F4F4;
      }
    }

    .line-10 {
      width: 100%;
      height: 10px;
      background: #F9F9F9;
    }

    .contact-row {
      position: relative;

      .contact-btn {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
      }
    }
  }
</style>
